<!--test.vue-->
<template>
  <div
    class="scroll-board"
    id="scrollBoard"
    ref="scrollBoard"
    style="width: 100%; height: 100%"
  >
    <dv-scroll-board
      :config="scrollConfig"
      style="width: 100%; height: 100%"
      :key="key"
    />
  </div>
</template>

<script>
import { config,configStatic } from "./data.js";
console.log(config);
export default {
  name: "ScrollBoard", // 这个名字很重要，它就是未来的标签名
  props: {
    config: {
      type: Object,
      default: () => config
    }
  },
  watch: {
    config(val) {
      this.scrollConfig = val;
    }
  },
  data() {
    return {
      scrollConfig: this.config,
      key: 1
    };
  },
  mounted() {
    let MutationObserver =
      window.MutationObserver ||
      window.WebKitMutationObserver ||
      window.MozMutationObserver;
    let element = document.getElementById("scrollBoard");
    this.observer = new MutationObserver(mutationList => {
      for (let mutation of mutationList) {
        console.log(mutation);
      }
      console.log("自适应");
      this.key++;
      //this.$forceUpdate()
      console.log('this.$refs["scrollBoard"]', this.$refs["scrollBoard"]);
    });
    this.observer.observe(element, {
      attributes: true,
      attributeFilter: ["style"],
      attributeOldValue: true
    });
  },
  beforeDestroy() {}
};
</script>

<style lang="scss" scoped>
.scroll-board {
  width: 100%;
  height: 100%;
  /deep/.header{
    min-height: 25px;
    background: #23262C;
    font-size: 10px;
    .header-item{
      text-align: center;
      &:first-child{
        width: 20% !important;
      }
      &:nth-child(1){
        width: 30% !important;
      }
      &:nth-child(2){
        width: 30% !important;
      }
      &:last-child{
        width: 20% !important;
      }
    }
    
  }
  /deep/.rows {
    cursor: pointer;
    .ceil {
      font-family: SourceHanSansCN-Normal;
    font-size: 9px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
    &:first-child{
        width: 20% !important;
      }
      &:nth-child(1){
        width: 30% !important;
      }
      &:nth-child(2){
        width: 30% !important;
      }
      &:last-child{
        width: 20% !important;
        color: #f52f5a;
      }
    }
  }
}
</style>
